﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>房天下 - 首页</title>
		<link rel="stylesheet" href="/static/css/style.css">
        <link rel="stylesheet" href="/static/css/head.css">
	</head>
	<body>
        <div id="header" class="wrap">
			<div id="logo">
				<a href="/">
					<img src="/static/images/logo.png">
				</a>
			</div>
			<div id="headbar">
				<a href="/login">用户登录</a>
				<a href="/register">快速注册</a>
				<div class="pub">
					<a href="/publish">发布房源</a>
				</div>
			</div>
		</div>
        <div id="navbar" class="wrap">
			<form @submit.prevent="search()">
				<div id="app2" class="search clearfix">
					<div class="fl">
						<ul>
							<li class="bold">房屋信息</li>
							<li>标题：
								<input type="text" class="text" v-model="title" @keydown.enter="search()">
								<label class="ui-blue">
								<input type="submit" name="search" value="搜索房屋">
							</label>
							</li>
						</ul>
					</div>
					<div class="fl">
						<ul>
							<li class="first">价格</li>
							<li>
								<select v-model="price">
									<option value='0-99999999'>不限</option>
									<option value='0-2000'>2000元以下</option>
									<option value='2000-3000'>2000元—3000元</option>
									<option value='3000-5000'>3000元—5000元</option>
									<option value='5000-10000'>5000元—10000元</option>
									<option value='10000-20000'>10000元—20000元</option>
									<option value='20000-99999999'>20000元以上</option>
								</select>
							</li>
						</ul>
					</div>
					<div class="fl">
						<ul>
							<li class="first">房屋位置</li>
							<li>
								省
								<select v-model.number="provId" @change="selectProv()">
									<option value="0">请选择</option>
									<option v-for="district in provinces" :value="district.distid">{{ district.name }}</option>
								</select>
								市
								<select v-model.number="cityId" @change="selectCity()">
									<option value="0" :selected="cities.length == 0">请选择</option>
									<option v-for="district in cities" :value="district.distid">{{ district.name }}</option>
								</select>
								区
								<select v-model.number="countyId">
									<option value="0" :selected="counties.length == 0">请选择</option>
									<option v-for="district in counties" :value="district.distid">{{ district.name }}</option>
								</select>
							</li>
						</ul>
					</div>
					<div class="fl">
						<ul>
							<li class="first">房型</li>
							<li>
								<select v-model="housetype">
									<option value="0">不限</option>
									<option v-for="housetype in housetypes" :value="housetype.typeid">{{ housetype.name }}</option>
								</select>
							</li>
						</ul>
					</div>
					<div class="fl">
						<ul>
							<li class="first">面积</li>
							<li>
								<select v-model="area">
									<option value="0-9999999">不限</option>
									<option value="0-50">50以下</option>
									<option value="50-100">50-100</option>
									<option value="100-200">100-200</option>
									<option value="200-9999999">200以上</option>
								</select>
							</li>
						</ul>
					</div>
				</div>
			</form>
		</div>
		<div id="app1" class="main wrap">
			<table class="house-list">
				<tr v-for="house in houses">
					<td class="house-thumb">
						<div>
							<img :src="house.mainphoto" width="160" height="120" alt="">
							<!-- <span class="count">{{ house.photocount }}图</span> -->
						</div>
					</td>
					<td>
						<dl>
							<dt>
								<a @click="">{{ house.title }}</a>
							</dt>
							<dd>
								{{ house.district.name }}&nbsp;{{ house.street }}&nbsp;
								{{ house.area }}平米&nbsp;{{ house.floor }}层/{{ house.totalfloor }}层 <br>
							</dd>
							<dd>
								<span v-for="tag in house.tags" class="house-tag">{{ tag.content }}</span>
							</dd>
						</dl>
					</td>
					<td class="house-type">{{ house.type.name }}</td>
					<td class="house-price"><span>{{ house.price }}</span>{{ house.priceunit }}</td>
				</tr>
			</table>
			<div class="pager">
				<ul>
					<li class="current">
						<a @click="">首页</a>
					</li>
					<li>
						<a @click="">上一页</a></li>
					<li>
						<a @click="">下一页</a>
					</li>
					<li>
						<a @click="">末页</a>
					</li>
				</ul>
			</div>
		</div>
        <div id="footer" class="wrap">
			<dl>
				<dt>&copy; 北京拓世宏业科技发展有限公司 版权所有</dt>
				<dd>京ICP备17002856号</dd>
				<dd>关于我们 · 联系方式 · 意见反馈 · 帮助中心</dd>
			</dl>
		</div>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
		<script>
			const app = new Vue({
				el: '#app1',
				data: {
					houses: [],
				},
				created() {
					fetch('/api/houseinfos')
						.then(resp => resp.json())
						.then(json => {
							this.houses = json.results
						})
				}
			})
		</script>
		<script>
			const app2 = new Vue({
				el: '#navbar',
				data: {
					housetypes: [],
					provinces: [],
					cities: [],
					counties: [],
					title: '',
					price: '0-99999999',
					provId: 0,
					cityId: 0,
					countyId: 0,
					housetype: 0,
					area: '0-9999999'
				},
				created() {
					fetch('/api/housetypes')
						.then(resp => resp.json())
						.then(json => this.housetypes = json)
					fetch('/api/districts')
						.then(resp => resp.json())
						.then(json => this.provinces = json)
				},
				methods: {
					selectProv() {
						this.cities = []
						this.counties= []
						if (this.provId != 0) {
							fetch('/api/districts/' + this.provId)
								.then(resp => resp.json())
								.then(json => this.cities = json.cities)
						}
					},
					selectCity() {
						this.counties = []
						fetch('/api/districts/' + this.cityId)
							.then(resp => resp.json())
							.then(json => this.counties = json.cities)
					},
					search() {
						url = '/api/houseinfos/?'
						let title = this.title.trim()
						if (title.length > 0) {
							url += `title=${title}&`
						}
						let prices = this.price.split('-')
						minprice = prices[0]
						maxprice = prices[1]
						url += `minprice=${minprice}&maxprice=${maxprice}&`
						if (this.cityId != 0) {
							if (this.countyId != 0) {
								url += `district=${this.countyId}`
							} else {
								url += `district=${this.cityId}`
							}
						}
						fetch(url).then(resp => resp.json())
							.then(json => app.houses = json.results)
					}
				}
			})
		</script>
	</body>
</html>